﻿<phone:PanoramaItem x:Class="PhoneGuitarTab.UI.Views.PanaromaItems.History"
                    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:Command="clr-namespace:PhoneCore.Framework.Views.Commands;assembly=PhoneGuitarTab.Core"
                    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
                    xmlns:Infrastructure="clr-namespace:PhoneGuitarTab.UI.Infrastructure"
                    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
                    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                    xmlns:uiControls="clr-namespace:PhoneGuitarTab.UI.Controls"
                    DataContext="{Binding Collection, Source={StaticResource Locator}}"
                    Header="{Binding Path=LocalizedResources.Panarama_History, Source={StaticResource LocalizedStrings}}"
                    mc:Ignorable="d">
    
    <phone:PanoramaItem.Resources>
        <Infrastructure:ImageUrlToUriConverter x:Key="ImageUrlToUriConverter"/>
    </phone:PanoramaItem.Resources>
    <Grid>
        <phone:LongListSelector x:Name="TabList" Margin="{Binding Startup.ListMargin, Source={StaticResource Locator}}"
                 toolkit:TiltEffect.IsTiltEnabled="True"
                 IsGroupingEnabled="False" LayoutMode="Grid" GridCellSize="400,350"
                 HideEmptyGroups="True"  
                 ItemsSource="{Binding TabsHistory.Tabs}">
            
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Tap">
                    <Command:ExecuteCommandAction Command="{Binding GoToTabView}" CommandParameter="{Binding ElementName=TabList, Path=SelectedItem}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <phone:LongListSelector.ItemTemplate>
                <DataTemplate>
                    <Grid Margin="60,20,60,20">
                        <Grid.RowDefinitions>
                            <RowDefinition  Height="Auto"/>
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

                        <Image VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="1"
                              Stretch="UniformToFill" MaxHeight="275" MaxWidth="275" Opacity="0.05" Source="/Images/applogo.png">
                        </Image>
                        <Image VerticalAlignment="Center" HorizontalAlignment="Center" Grid.Column="1"
                           Stretch="UniformToFill"
                           Visibility="Visible" MaxHeight="275" MaxWidth="275" Opacity="0.8">
                            <Image.Source >
                                <BitmapImage UriSource="{Binding AlbumCoverImageUrl, Converter={StaticResource ImageUrlToUriConverter}}"  />
                            </Image.Source>
                        </Image>
                        
                        <StackPanel Name="SongAndBandName"  VerticalAlignment="Bottom" HorizontalAlignment="Left" Grid.Column="1" Margin="0,0,0,-15">
                            <TextBlock Margin="5,0,-20,0"
                                   FontFamily="{StaticResource PhoneFontFamilyBold}"
                                   FontSize="20"
                                   Foreground="White"
                                   Style="{StaticResource PhoneTextLargeStyle}"
                                   TextWrapping="Wrap"
                                   Text="{Binding Name}" />
                            <TextBlock Margin="5,0,0,19"
                                   FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                   FontSize="14"
                                   Foreground="White"
                                   TextWrapping="Wrap"
                                   Style="{StaticResource PhoneTextNormalStyle}">
                            <Run Text="{Binding Group}"   />
                            </TextBlock>
                        </StackPanel>
                        <StackPanel Name="TabData" Orientation="Vertical" Grid.Column="0" Margin="0,0,-220,0">
                            <TextBlock Foreground="WhiteSmoke" Margin="5,0,0,0">
                                <Run Text="{Binding LastOpened, Converter={StaticResource relativeTimeConverter}}" />
                            </TextBlock>
                            <StackPanel Name="TabTypeRating" Orientation="Horizontal" Margin="-5,0,0,0">
                                <Image Source="{Binding RelativeImageUri}" Stretch="UniformToFill" MaxWidth="40" MaxHeight="40" />
                                <StackPanel  Orientation="Vertical" >
                                    <uiControls:RatingControl 
                                              VerticalAlignment="Bottom"
                                              Rating="{Binding Rating, Converter={StaticResource stringToInt}}" />
                                    <TextBlock
                                        FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                        Foreground="{StaticResource PhoneAccentBrush}"
                                        Text="{Binding Type}"/>
                                </StackPanel>
                            </StackPanel>
                        </StackPanel>
                    </Grid>
                </DataTemplate>
            </phone:LongListSelector.ItemTemplate>
        </phone:LongListSelector >
    </Grid>
</phone:PanoramaItem>